<template>
  <div>
    <el-card class="box-card">
      <div class="news_header">
        <el-form :inline="true" :model="form" label-width="120px">
          <el-form-item label="反馈类型" prop="uid">
            <!-- <el-input
              v-model.trim="nickname"
              placeholder="反馈类型"
              clearable
            ></el-input> -->
            <el-select v-model="form.feedback_type" placeholder="请选择" @change="fromdata">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="marginTop">
            <el-button
              class="reset marginLeft"
              type="primary"
              @click="reset"
              >重置</el-button
            >
            <el-button type="primary" @click="searchNews" :loading="listLoading">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- <div class="delectright">
          <el-button size="mini" title="添加" type="success" @click="addNews">
            添加</el-button
          >  </div> -->
      </div>
      <div class="main_table" style="min-height: 600px">
        <el-table
          ref="multipleTable"
          :data="nicknameData"
          tooltip-effect="dark"
          style="width: 100%"
          :height="handleScrool"
          v-loading="listLoading"
        >
          <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
          <!-- <el-table-column prop="id" label="id" width="300" align="center"> -->
          <!-- </el-table-column> -->
          <el-table-column
            prop="feedback_type"
            label="反馈类型"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="created_at"
            width="200"
          >
            <!-- <template slot-scope="scope">{{ scope.row.created_at }}</template> -->
          </el-table-column>
          <el-table-column
            label="修改时间"
            align="center"
            prop="updated_at"
            width="200"
          />
          <el-table-column label="手机号" prop="phone" align="center">
          </el-table-column>
          <el-table-column label="反馈图片" align="center" width="120">
            <template slot-scope="scope">
              <div class="logo">
                <img :src="scope.row.img_arr" alt="" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            label="反馈详情"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" width="400" align="center">
            <template slot-scope="scope">
              <!-- <el-button
                type="text"
                style="color: #e4aa39"
                size="mini"
                @click="editNews(scope.row)"
                title="修改"
                >修改</el-button
              > -->
              <!-- <el-popconfirm
                confirm-button-text="是的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除勾选的数据吗？"
                @onConfirm="deleteNews(scope.row)"
              >
                <el-button
                  type="text"
                  style="color: #67c23a"
                  size="mini"
                  title="删除"
                  slot="reference"
                  >删除</el-button
                >
              </el-popconfirm> -->
              <el-link
                @click="viewNews(scope.row)"
                style="color: #67c23a"
                size="mini"
                title="查看"
                >查看</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="footer_pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page_sizes"
          layout=" ->,total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 查看 -->
      <el-dialog
        :title="`${rowlist.feedback_type} `"
        :visible.sync="centerDialogVisible"
        width="50%"
        center
      >
        <div class="rowdialog">
          <el-image
            style="width: 300px"
            :src="(rowlist.img_arr || [])[0]"
            :preview-src-list="rowlist.img_arr"
            class="rowdialog-image"
          >
          </el-image>
          <span> {{ rowlist.content }}</span>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { Feedfromdata } from "@/api/feedback/index";
// import { Newsfromdata, delectfromdata } from "@/api/news/index";
import Pagination from "../../mixins/pagination";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  name: "feedback",
  // components: {},
  mixins: [Pagination],
  data() {
    return {
      handleScrool: "",
      centerDialogVisible: false,
      rowlist: { author: "", id: 0, info: "", intro: "", status: 1, title: "" },
      form: {
        uid: "",
        feedback_type:"",
      },
      options: [
        {
          value: "选项1",
          label: "系统问题",
        },
        {
          value: "选项2",
          label: "食材问题",
        },
        {
          value: "选项3",
          label: "价格问题",
        },
        {
          value: "选项4",
          label: "其他问题",
        },
      ],
      // 加载功能
      listLoading: false,
      option: [],
      value: "",
      sendTime: [],
      nicknameData: [],
      //    [
      //     { author: "", id: 0, info: "", intro: "", status: 1, title: "" },
      //   ],
      //   tableData: [
      //     {
      //       id: 21,
      //       name: "口感问题",
      //       state: 15526543654,
      //       details:
      //         "上海市普陀区金沙江路 1518 弄阿斯蒂芬撒地方撒娇佛教 撒旦解放吉萨放假哦撒低级欧福嫂就发是放假哦阿三发撒金佛i就阿斯蒂芬按实际发生坡建房啊是放假哦阿达发生，上海市普陀区金沙江路 1518 弄阿斯蒂芬撒地方撒娇佛教 撒旦解放吉萨放假哦撒低级欧福嫂就发是放假哦阿三发撒金佛i就阿斯蒂芬按实际发生坡建房啊是放假哦阿达发生，上海市普陀区金沙江路 1518 弄阿斯蒂芬撒地方撒娇佛教 撒旦解放吉萨放假哦撒低级欧福嫂就发是放假哦阿三发撒金佛i就阿斯蒂芬按实际发生坡建房啊是放假哦阿达发生，上海市普陀区金沙江路 1518 弄阿斯蒂芬撒地方撒娇佛教 撒旦解放吉萨放假哦撒低级欧福嫂就发是放假哦阿三发撒金佛i就阿斯蒂芬按实际发生坡建房啊是放假哦阿达发生",
      //     },
      //     {
      //       id: 22,
      //       name: "调味问题",
      //       state: 15526543658,
      //       details: "上海市普陀区金沙江路 1518 弄",
      //     },
      //     {
      //       id: 23,
      //       name: "烹饪问题",
      //       state: 15564543654,
      //       details: "上海市普陀区金沙江路 1518 弄",
      //     },
      //     {
      //       id: 25,
      //       name: "卫生问题",
      //       state: 1552888654,
      //       details: "上海市普陀区金沙江路 1518 弄",
      //     },
      //     {
      //       id: 2,
      //       name: "食材问题",
      //       state: 1552888655,
      //       details: "上海市普陀区金沙江路 1518 弄",
      //     },
      //     {
      //       id: 3,
      //       name: "价格问题",
      //       state: 1532888654,
      //       details: "上海市普陀区金沙江路 1518 弄",
      //     },
      //     {
      //       id: 4,
      //       name: "分量问题",
      //       state: 1222888654,
      //       details: "上海市普陀区金沙江路 1518 弄",
      //     },
      //     {
      //       id: 5,
      //       name: "温度问题",
      //       state: 1862888654,
      //       details: "上海市普陀区金沙江路 1518 弄",
      //     },
      //     {
      //       id: 6,
      //       name: "其他问题",
      //       state: 1342888699,
      //       details: "上海市普陀区金沙江路 1518 弄",
      //     },
      //     {
      //       id: 256,
      //       name: "其他问题",
      //       state: 1342888698,
      //       details: "上海市普陀区金沙江路 151弄",
      //     },
      //   ],
      // 勾选的数据
      multipleSelection: [],
      // 新闻日期
      pickerOptions: [],
    };
  },
  mounted() {
    this.fromdata();
    // this.nicknameData = this.tableData;
  },

  methods: {
    fromdata() {
      this.listLoading = true;
      let data = {
        page: this.currentPage4,
        page_size: this.page_sizes,
        feedback_type:this.form.feedback_type,
      };
      let query = Object.assign(
        apiUrl().name,
        data
      );
      Feedfromdata(query).then(
        (res) => {
          console.log("res", res);
          this.nicknameData = res.data.list.data;
          this.total = res.data.list.total;
          this.page_sizes = parseInt(res.data.list.per_page);
          this.currentPage4 = res.data.list.current_page;
          this.listLoading = false;
        },
        (err) => {
           this.$message.error(res.errmsg);
          this.listLoading = false;
        }
      );
    },

    reset() {
      // 重置搜索条件
      this.form.feedback_type = "";
      //   this.nicknameData = this.tableData;
      //重新收索请求
      this.fromdata();
    },
    searchNews() {
      this.currentPage4=1
      this.fromdata()
    },
    searchByDate() {
      // 根据时间搜索新闻
      // TODO: 实现按时间查找逻辑
    },
    addNews() {
      // 添加新闻
      // TODO: 实现添加逻辑
      this.$router.replace("/news/plus/");
    },
    editNews(row) {
      // 修改新闻
      console.log("修改", row);
      this.$router.push("/news/edit/" + row.id);
      setTimeout(() => {
        this.$bus.$emit("Edit-row", row);
      }, 1000);
    },
    deleteNews(row) {
      // 删除新闻

      console.log("删除这条", row, row.id);

      let data = {
        id: row.id,
        // action: "del",
      };
      let query = Object.assign(
        apiUrl().name,
        data
      );
      delectfromdata(query).then(
        (res) => {
          console.log("删除成功", res);
          // this.nicknameData = res.data.list.data;
          if (res.errcode == 0) {
            this.$message.success("删除成功");
            // this.fromdata();
          } else {
            this.$message.error(res.errmsg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    viewNews(row) {
      // 查看新闻
      // TODO: 实现查看逻辑
      this.centerDialogVisible = true;
      this.rowlist = row;
    },
    // 状态
    // changeSwitch(e, row) {
    //   console.log("1", e, row);
    // },

    // 勾选的数据
    // handleSelectionChange(val) {
    //   console.log("val", val);
    //   this.multipleSelection = val;
    // },

    // 底部到视口顶部的距离
    handleScroll() {
      const distance = window.innerHeight - 260;
      this.handleScrool = distance + "px";
      console.log(this.handleScrool);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page_sizes = val;
      this.fromdata();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.fromdata();
    },
  },
  // watch: {
  //   $router() {
  //     this.fromdata();
  //   },
  // },
  created() {
    this.handleScroll();
  },
};
</script>
<style lang="scss" scoped>
.box-card {
  width: 100%;
  margin: 0.875rem;
  .delectright {
    position: relative;
    left: 95%;
  }
}

.rowdialog {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.5rem;
  span {
    margin-left: 3rem;
    flex: 1;
  }
}
.logo {
  min-width: 100px;
  width: 100px;
  height: 67px;
  margin-right: 10px;

  img {
    width: 100%;
    height: 100%;
  }
}
.reset{
  background: none;
  color: #03A98E;
}
</style>
